<!--
  应用程序根组件
  创建时间：2025-09-11
  作者：开发团队
  目的：系统根组件，包含路由切换和加载状态
-->

<template>
  <div id="app" class="app-container">
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-content">
        <el-avatar :size="64" class="loading-logo">
          <el-icon><Lock /></el-icon>
        </el-avatar>
        <h2>新易访内网系统</h2>
        <p class="loading-text">初始化中...</p>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <RouterView v-else />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { RouterView } from 'vue-router'
import { Lock } from '@element-plus/icons-vue'

// 响应式状态
const isLoading = ref(true)

/**
 * 组件挂载时初始化
 */
onMounted(() => {
  try {
    // 模拟初始化延迟
    setTimeout(() => {
      isLoading.value = false
    }, 1000)
  } catch (error) {
    console.error('应用初始化失败:', error)
    isLoading.value = false
  }
})
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.app-container {
  height: 100vh;
  background: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-logo {
  background: var(--el-color-primary);
  color: white;
  margin-bottom: 16px;
}

.loading-content h2 {
  color: var(--el-text-color-primary);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}

.loading-text {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

/* Element Plus 主题变量覆盖 */
:root {
  --el-color-primary: #409eff;
}

/* 深色主题支持 */
html.dark {
  color-scheme: dark;
}

html.dark .loading-container {
  background: rgba(0, 0, 0, 0.9);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--el-fill-color-lighter);
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color-darker);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color-dark);
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式断点 */
@media (max-width: 768px) {
  .loading-content h2 {
    font-size: 20px;
  }
}
</style>